<template>
  <div class="card" v-loading="loading">
    <courseMiniDrawer
      :from="$route.query.from"
      :show.sync="courseMiniDrawer_open"
      :info="form"
    ></courseMiniDrawer>
    <!-- 添加课程弹框 -->
    <courseBaseInfo
      :type="courseBaseInfo_type"
      :open.sync="courseBaseInfo_open"
      :courseInfo="form"
      @addSuccess="addSuccessReturn"
    ></courseBaseInfo>
    <div class="courseContian_title">
      {{ form.courseName
      }}<i
        @click="handleEditCourseIfo"
        class="el-icon-question shou"
        style="font-size: 16px; vertical-align: middle; margin-left: 0px"
      ></i>
      <el-button
        v-preventReClick
        type="primary"
        size="mini"
        style="margin-left: 10px"
        v-if="type == 'detail' || type == 'audit'"
        icon="el-icon-view"
        @click="courseMiniDrawer_open = true"
        >小程序预览
      </el-button>
    </div>
    <div class="scrollbox">
      <div class="courseInfoDetail">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="课程名称" prop="courseName">
                <div>{{ form.courseName }}</div>
              </el-form-item>
              <el-form-item
                label="课程封面"
                prop="coursePic"
                v-if="form.coursePic"
              >
                <div class="uploadCourseCover">
                  <div class="upload-head">
                    <img v-bind:src="form.coursePic" class="cover" />
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="岗位" prop="postIds">
                <div>{{ form.postNames }}</div>
              </el-form-item>
              <el-form-item
                label="时长"
                prop="studyTime"
                v-if="form.studyTime && form.studyTime !== 0"
              >
                <span> {{ form.studyTime ? form.studyTime : "0" }}</span>
                时
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="form.studyTools">
              <el-form-item label="材料/设备" prop="studyTools">
                <div
                  style="
                    word-wrap: break-word;
                    width: 300px !important;
                    height: 300px;
                    overflow-y: scroll;
                  "
                >
                  {{ form.studyTools }}
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="form.describe">
              <el-form-item label="课程描述" prop="describe">
                <div
                  style="
                    word-wrap: break-word;
                    width: 300px !important;
                    height: 300px;
                    overflow-y: scroll;
                  "
                >
                  {{ form.describe }}
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="flex">
        <!-- 树列表 -->
        <div class="taskListBox">
          <div class="taskListBox_title flexbet">
            <el-tooltip class="item" effect="dark" placement="bottom-start">
              <div class="courseName overtxt shou flex">
                {{ form.courseName }}

                <!-- <div class="rela">
                <i
                  @click="dialogVisible = !dialogVisible"
                  class="el-icon-question shou"
                  style="
                    font-size: 16px;
                    vertical-align: middle;
                    margin-left: 0px;
                  "
                ></i>
                <div
                  :class="[
                    'courseDialog',
                    dialogVisible ? 'courseDialog_show' : 'courseDialog_close',
                  ]"
                >
                  111
                </div>
              </div> -->
              </div>
              <div slot="content">{{ form.courseName }}</div>
            </el-tooltip>

            <div class="allExpand flex shou" @click="unfold = !unfold">
              <img
                v-if="!unfold"
                src="@/assets/images/courseadd/expand.png"
                alt=""
              />
              <img v-else src="@/assets/images/courseadd/shrink.png" alt="" />
              {{ !unfold ? "全部展开" : "全部收起" }}
            </div>
          </div>
          <div
            class="taskListBox_btns flexbet"
            v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
          >
            <div class="flex shou taskListBox_btn" @click="handleQuestionBox">
              <img src="@/assets/images/courseadd/question.png" alt="" />
              题库
            </div>
            <div class="flex shou taskListBox_btn" @click="handleAddTask">
              <img
                class="gadd"
                src="@/assets/images/courseadd/gadd.png"
                alt=""
              />
              <img class="add" src="@/assets/images/courseadd/add.png" alt="" />
              添加任务
            </div>
          </div>
          <div
            class="taskListBox_tip flex"
            v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
          >
            <div>注：任务和步骤均可通过拖拽来调整排序</div>
            <!-- <div
                  style="color: #28b28b; margin-left: 10px; cursor: pointer"
                  v-if="type !== 'detail' && type !== 'audit'"
                >
                  预览
                </div> -->
          </div>
          <div
            class="taskListBox_tree"
            :style="{
              marginTop:
                ($route.query.type == 'add' || $route.query.type == 'edit'
                  ? 0
                  : 24) + 'px',
            }"
          >
            <!-- 任务列表 -->
            <el-empty
              v-if="
                ccCourseChapterTemporaryList &&
                ccCourseChapterTemporaryList.length == 0
              "
              description="暂无任务~"
            ></el-empty>

            <courseTrees
              @addLink="handleAddLink"
              @handleClick="nodeClick"
              @delete="handleDelete"
              @rename="handleRename"
              @sort="handleSort"
              type="detail"
              ref="courseTrees"
              :highlightedNodeId="highId"
              v-else
              :data="ccCourseChapterTemporaryList"
            ></courseTrees>
          </div>
        </div>

        <!-- 章节信息 -->
        <div class="taskInfoBox">
          <div class="topLine">{{ dynamicTitle }}</div>
          <!-- 任务 -->
          <div class="box">
            <addTaskForm
              :tabIndex="1"
              v-if="selectedLevel == 'chapter'"
              :chapterId="selectedId"
              :type="type"
              :courseForm="form"
            ></addTaskForm>
            <addLinkForm
              :tabIndex="1"
              v-else-if="selectedLevel == 'task'"
              @refresh="addLinkFormReturn"
              :courseId="form.courseTemporaryId"
              :topicCategoryId="topicCategoryId"
              :taskId="selectedId"
              :type="type"
              :courseForm="form"
            >
            </addLinkForm>
            <el-empty
              v-else
              style="margin-top: 80px"
              description="暂无信息~"
            ></el-empty>
          </div>
        </div>
      </div>
    </div>

    <!-- 驳回 -->
    <reject
      :open.sync="rejectOpen"
      :type="1"
      @refresh="reasonDiaReturn"
    ></reject>
    <!-- 题库 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="选择试题"
      :visible.sync="question_open"
      width="1200px"
      append-to-body
    >
      <div class="topicListDiv">
        <TopicList
          :parentopen="question_open"
          ref="myTopicList"
          :showAll="true"
          :propsCategoryId="topicCategoryId"
          :showExpot="showExpot"
          :hiddenEdit="true"
          :hideAdd="true"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addLinkForm from "./components/addLinkForm";
import addTaskForm from "./components/addTaskForm";
import TopicList from "./components/TopicList";
//TODO 步骤的 题库 线上考核 线下考核 练习未完成 还有一些修改的细节 步骤列表没有数据
import vuedraggable from "vuedraggable";
import reject from "@/components/reject";
import courseMiniDrawer from "@/components/courseMiniDrawer";
import courseInfo from "./components/courseInfo";
import courseTrees from "./components/courseTrees";
import { queryCourseTemporary, getPost_course } from "@/api/course/course";
import {
  addPost_chapterTemporary,
  sort_chapterTemporary,
  updatePost_chapterTemporary,
  delPost_chapterTemporary,
  listPost_chapterType,
} from "@/api/course/chapter";
import {
  addPost_courseTask,
  delPost_courseTask,
  updatePost_courseTask,
  sort_courseTask,
  addPost_courseTaskContent,
} from "@/api/course/task";
import uploadImages from "@/components/uploadImages";
import courseBaseInfo from "./components/courseBaseInfo";
import { removeItemById, addToChildren } from "./formatTreeData";
export default {
  components: {
    courseBaseInfo,
    courseTrees,
    uploadImages,
    courseInfo,
    addLinkForm,
    addTaskForm,
    TopicList,
    vuedraggable,
    reject,
    courseMiniDrawer,
  },
  props: {},
  data() {
    return {
      courseMiniDrawer_open: false,
      highId: "",
      courseBaseInfo_type: "add",
      courseBaseInfo_open: false,
      courseBaseInfo_courseInfo: "",
      dialogVisible: false,
      // 全部展开收起 标志
      unfold: true,
      question_id: "",
      uuid: "",
      topicCategoryId: "",
      dynamicTitle: "详情",
      loading: false,
      ccCourseChapterTemporaryList: [],
      rejectOpen: false,
      type: this.$route.query.type,
      // 添加步骤组件
      addLinkForm: {},
      // 添加任务组件（添加任务需要必修卡片id）
      requiredTypeCardId: "",
      question_open: false,
      showExpot: false,
      selectedId: undefined,
      selectedLevel: "",
      vuecutshow: false,
      // 表单参数
      form: {
        courseTemporaryId: "",
        courseName: "新建课程",
      },
    };
  },
  watch: {
    selectedId: {
      handler(val) {
        console.log("selectedId", val);
      },
    },
    // 监听 unfold 页面初始化的时候就开始监听
    unfold: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.$refs.courseTrees.expandAll();
          });
        } else {
          this.$nextTick(() => {
            this.$refs.courseTrees.collapseAll();
          });
        }
      },
    },
  },
  created() {},
  beforeDestroy() {
    this.$nextTick(() => {
      this.$destroy();
    });
  },
  mounted() {
    this.guid();
    let title;

    this.form.courseTemporaryId = this.$route.query.courseTemporaryId;
    this.form.courseId = this.$route.query.courseId;
    this.getcourseInfo();
    if (this.type == "detail") {
      this.routetitle = "课程详情";
      title = "课程详情";
    } else {
      this.routetitle = "审核课程";
      title = "审核课程";
    }

    const route = Object.assign({}, this.$route, {
      title: `${title}`,
    });
    this.$store.dispatch("tagsView/updateVisitedView", route);
  },
  methods: {
    /* 查看课程详情 */
    handleEditCourseIfo() {
      this.courseBaseInfo_open = true;
      this.courseBaseInfo_type = "detail";
    },
    /* 排序 */
    async handleSort(e) {
      console.log("排序", e);
      // 章节排序
      if (e.level == 1) {
        sort_chapterTemporary(JSON.stringify(e.arr));
      }
      // 任务排序
      else {
        sort_courseTask(JSON.stringify(e.arr));
      }
    },
    /* 课程添加成功返回 */
    async addSuccessReturn(courseTemporaryId) {
      // 获取课程信息
      let res = await queryCourseTemporary(courseTemporaryId);
      if (res.code == 200) {
        this.form = res.data;
        this.form.courseTemporaryId = res.data.id;
        console.log("课程添加成功返回", this.form);
      }
    },
    /* 获取课程信息 */
    async getcourseInfo() {
      let res;
      this.loading = true;
      if (this.$route.query.status.includes("temporary")) {
        res = await queryCourseTemporary(this.form.courseTemporaryId);
        if (res.code == 200) {
          res.data.courseTemporaryId = res.data.id;
          this.topicCategoryId = res.data.topicCategoryId
            ? res.data.topicCategoryId
            : "";
          this.form = JSON.parse(JSON.stringify(res.data));
          let arr = [];
          // 先将 必修选修合并 赋予type
          for (
            let i = 0;
            i < res.data.ccCourseChapterTypeTemporaryList.length;
            i++
          ) {
            for (
              let j = 0;
              j <
              res.data.ccCourseChapterTypeTemporaryList[i]
                .ccCourseChapterTemporaryList.length;
              j++
            ) {
              // 赋予必修选修属性type
              res.data.ccCourseChapterTypeTemporaryList[
                i
              ].ccCourseChapterTemporaryList[j].type =
                res.data.ccCourseChapterTypeTemporaryList[i].type;
              arr.push(
                res.data.ccCourseChapterTypeTemporaryList[i]
                  .ccCourseChapterTemporaryList[j]
              );
            }
          }
          // 排序
          arr.sort((x, y) => {
            return x.sort - y.sort;
          });
          console.log(arr);
          // 处理id name children
          for (let i = 0; i < arr.length; i++) {
            arr[i].name = arr[i].chapterName;
            arr[i].showRename = false;
            arr[i].level = 1;
            arr[i].children = arr[i].ccCourseTaskTemporaryList;
            arr[i].highId = "chapter_" + arr[i].id;
            for (let j = 0; j < arr[i].children.length; j++) {
              arr[i].children[j].showRename = false;
              arr[i].children[j].level = 2;
              arr[i].children[j].name = arr[i].children[j].taskName;
              arr[i].children[j].highId = "task_" + arr[i].children[j].id;
            }
          }
          this.ccCourseChapterTemporaryList = arr;
          //如果任务数量不为空 初始化选中第一个任务
          if (this.ccCourseChapterTemporaryList.length > 0) {
            this.dynamicTitle = this.ccCourseChapterTemporaryList[0].name;
            this.selectedId = this.ccCourseChapterTemporaryList[0].id;
            this.highId = "chapter_" + this.ccCourseChapterTemporaryList[0].id;
            this.selectedLevel =
              this.ccCourseChapterTemporaryList[0].level == 1
                ? "chapter"
                : "task";
          }
          this.loading = false;
        } else {
          this.loading = false;
        }
      } else {
        res = await getPost_course(this.form.courseId);
        if (res.code == 200) {
          this.topicCategoryId = res.data.topicCategoryId
            ? res.data.topicCategoryId
            : "";
          this.form = JSON.parse(JSON.stringify(res.data));
          let arr = [];
          // 先将 必修选修合并 赋予type
          for (let i = 0; i < res.data.ccCourseChapterTypeList.length; i++) {
            for (
              let j = 0;
              j <
              res.data.ccCourseChapterTypeList[i].ccCourseChapterList.length;
              j++
            ) {
              // 赋予必修选修属性type
              res.data.ccCourseChapterTypeList[i].ccCourseChapterList[j].type =
                res.data.ccCourseChapterTypeList[i].type;
              arr.push(
                res.data.ccCourseChapterTypeList[i].ccCourseChapterList[j]
              );
            }
          }
          // 排序
          arr.sort((x, y) => {
            return x.sort - y.sort;
          });
          console.log(arr);
          // 处理id name children
          for (let i = 0; i < arr.length; i++) {
            arr[i].id = arr[i].chapterId;
            arr[i].name = arr[i].chapterName;
            arr[i].showRename = false;
            arr[i].level = 1;
            arr[i].children = arr[i].ccCourseTaskList;
            arr[i].highId = "chapter_" + arr[i].id;
            for (let j = 0; j < arr[i].children.length; j++) {
              arr[i].children[j].showRename = false;
              arr[i].children[j].level = 2;
              arr[i].children[j].name = arr[i].children[j].taskName;
              arr[i].children[j].id = arr[i].children[j].taskId;
              arr[i].children[j].highId = "task_" + arr[i].children[j].id;
            }
          }
          this.ccCourseChapterTemporaryList = arr;
          //如果任务数量不为空 初始化选中第一个任务
          if (this.ccCourseChapterTemporaryList.length > 0) {
            this.dynamicTitle = this.ccCourseChapterTemporaryList[0].name;
            this.selectedId = this.ccCourseChapterTemporaryList[0].id;
            this.highId = "chapter_" + this.ccCourseChapterTemporaryList[0].id;
            this.selectedLevel =
              this.ccCourseChapterTemporaryList[0].level == 1
                ? "chapter"
                : "task";
          }
          this.loading = false;
        } else {
          this.loading = false;
        }
      }
    },
    /* 节点点击 */
    nodeClick(node) {
      this.selectedLevel = node.level == 1 ? "chapter" : "task";
      this.selectedId = node.id;
      this.highId = node.highId;
      //dynamicTitle处理
      this.dynamicTitle = node.name;
    },
    /* 添加步骤 item为父节点*/
    async handleAddLink(item) {
      console.log(item);
      let task = {
        taskName: item.chapterName + "-步骤" + (item.children.length + 1),
        showRename: true,
        describe: "",
        taskFileTemporaries: [],
        courseTemporaryId: this.form.courseTemporaryId,
        chapterTemporaryId: item.id,
      };
      let res = await addPost_courseTask(task);
      if (res.code == 200) {
        task.id = res.data;
        this.selectedId = "task_" + res.data;
        this.selectedLevel = "task";
        // dynamicTitle处理
        this.dynamicTitle = task.taskName;
      }
      let taskNode = {
        id: res.data,
        name: task.taskName,
        showRename: true,
        level: 2,
      };
      addToChildren(this.ccCourseChapterTemporaryList, item.id, taskNode);
      // 还需要为任务添加步骤
      let res2 = await addPost_courseTaskContent({
        taskFileTemporaries: [],
        description: "",
        contentName: "",
        contentUrl: "",
        taskTemporaryId: taskNode.id,
      });
    },
    /* 添加任务 */
    async handleAddTask() {
      // 添加之前得先获取必修卡片id
      if (this.requiredTypeCardId == "") {
        let res = await listPost_chapterType({
          courseTemporaryId: this.form.courseTemporaryId,
        });
        if (res.code == 200) {
          this.requiredTypeCardId = res.rows.length > 0 ? res.rows[0].id : "";
        }
      }
      // 调取接口 然后向tree里面加任务
      let data = {
        chapterName: "任务" + (this.ccCourseChapterTemporaryList.length + 1),
        chapterTypeTemporaryId: this.requiredTypeCardId,
        courseTemporaryId: this.form.courseTemporaryId,
        ccCourseTaskTemporaryList: [],
        chapterObjectives: undefined,
        describe: undefined,
        recommendTime: undefined,
      };
      let res = await addPost_chapterTemporary(data);
      if (res.code == 200) {
        let chapterItem = {
          ...data,
          id: res.data,
          level: 1,
          showRename: true,
          name: data.chapterName,
        };
        this.ccCourseChapterTemporaryList.push(chapterItem);
        this.selectedLevel = 1;
        this.selectedId = "chapter_" + res.data;
        //dynamicTitle处理
        this.dynamicTitle = chapterItem.name;
      }
    },
    /* 删除任务 步骤*/
    handleDelete(item) {
      this.$confirm(`确定删除'${item.name}'吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(item.level);
          let res;
          if (item.level == 1) {
            res = await delPost_chapterTemporary(item.id);
          } else {
            res = await delPost_courseTask(item.id);
          }
          console.log(res);
          if (res.code == 200) {
            this.$modal.msgSuccess(
              `删除${item.level == 1 ? "任务" : "环节"}成功`
            );
            removeItemById(this.ccCourseChapterTemporaryList, item.id);
            // 删除时如果在当前 环节或章节
            if (
              this.ccCourseChapterTemporaryList.length > 0 &&
              this.selectedId == item.id
            ) {
              this.selectedId = this.ccCourseChapterTemporaryList[0].id;
              this.selectedLevel = "chapter";
            } else {
              this.selectedId = "";
              this.selectedLevel = "";
            }
          }
        })
        .catch(() => {});
    },
    /* 重名名 */
    async handleRename(item) {
      let res;
      // 如果是章节
      if (item.level == 1) {
        res = await updatePost_chapterTemporary({
          courseTemporaryId: this.form.courseTemporaryId,
          id: item.id,
          chapterName: item.name,
        });
      }
      // 如果是环节
      else {
        res = await updatePost_courseTask({
          courseTemporaryId: this.form.courseTemporaryId,
          chapterTemporaryId: item.chapterTemporaryId,
          id: item.id,
          taskName: item.name,
        });
      }
      if (res.code == 200) {
        // this.$modal.msgSuccess(
        //   item.level == 1 ? "修改章节成功" : "修改环节成功"
        // );
        item.showRename = false;
        //dynamicTitle处理
        this.dynamicTitle = item.name;
      }
    },
    /* 题库按钮 */
    handleQuestionBox(taskId) {
      this.question_open = true;
      this.showExpot = true;
      this.$nextTick(() => {
        this.$refs.myTopicList.getList();
      });
    },

    guid() {
      this.form.dirName = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    addLinkFormReturn(e) {
      this.ccCourseChapterTemporaryList[
        this.selectedChapterIndex
      ].ccCourseTaskTemporaryList[this.selectedTaskIndex].examId = e;
    },

    /* 驳回组件返回 */
    reasonDiaReturn(e) {},
    handleReject() {
      this.rejectOpen = true;
    },
    coverResult(e) {
      this.form.coursePic = e;
    },
    editCropper() {
      this.vuecutshow = true;
    },
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
.courseInfoDetail {
  border-bottom: 1px solid #ebebeb;
}
.scrollbox {
  max-height: calc(100vh - 190px);
  overflow-y: scroll;
}
.scrollbox::-webkit-scrollbar {
  width: 0; // 横向滚动条
  height: 4px; // 纵向滚动条 必写
}
.courseDialog_close {
  top: -109px;
  left: 72px;
  transform: scale(0.001);
}
.courseDialog_show {
  top: 50vh;
  left: 50vw;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}
.courseDialog {
  transition: all 0.5s;
  z-index: 999;
  position: fixed;
  width: 600px;
  height: 600px;
  background: pink;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
.el-dialog {
}
@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30rpx;
  font-size: 28rpx;
  &:active {
    background: darken($bg_color, 10%);
    color: darken($color, 18%);
  }
  &:disabled {
    background: lighten($bg_color, 10%);
    color: lighten($color, 40%);
  }
  @content;
}
.detailbottom {
  border-top: 1px solid #ebebeb;
  height: 72px;
  box-sizing: border-box;
  padding: 0 19px 0 37px;
  align-items: center;

  ::v-deep .el-button {
    padding: 0 24px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-radius: 8px;
    line-height: 38px;
    height: 40px;
  }
}

// .baseInfo::-webkit-scrollbar {
//   display: none;
// }
.baseInfo {
  height: calc(100vh - 120px - 72px - 72px);
  overflow: auto;
}

.card {
  .courseContian_title {
    padding-left: 20px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #ebebeb;
    box-sizing: border-box;
  }
  margin: 15px auto 0 auto;
  width: 1200px;
  height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: 0px 0px 8px 0px rgba(9, 28, 61, 0.17);

  ::v-deep .el-tabs__item {
    height: 46px !important;
    line-height: 46px !important;
  }

  ::v-deep .el-tabs__nav-wrap {
    padding-left: 73px;
  }

  ::v-deep .el-tabs__header {
    margin: 0 0 0px 0;
  }
}

//树列表盒子
.taskListBox {
  width: 320px;
  max-height: calc(100vh - 190px);
  border-right: 1px solid #ebebeb;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  &_title {
    box-sizing: border-box;
    padding: 0 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;

    .courseName {
      width: 180px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 45px;
    }

    .allExpand {
      img {
        margin: auto 4px auto 0;
        width: 16px;
        height: 16px;
      }

      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 45px;
    }
  }

  &_btns {
    padding: 8px 12px;
    .taskListBox_btn {
      .add {
        display: block;
      }
      .gadd {
        display: none;
      }
      .set {
        display: block;
      }
      .gset {
        display: none;
      }
    }
    .taskListBox_btn:hover {
      color: #28b28b;
      .add {
        display: none;
      }
      .gadd {
        display: block;
      }
      .set {
        display: none;
      }
      .gset {
        display: block;
      }
    }
    .taskListBox_btn {
      @include btn_plain(#f7f9fa, #333333) {
        box-sizing: border-box;
        width: 140px;
        align-items: center;
        background: #f7f9fa;
        border-radius: 8px;
        border: 1px solid #edeff0;
        height: 32px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        user-select: none;
      }

      img {
        width: 20px;
        height: 20px;
        margin: 0 8px 0 0;
      }
    }
  }

  &_tip {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
    padding: 0 0 12px 10px;
  }

  &_tree {
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
  }
}

// 章节信息盒子
.taskInfoBox {
  flex: 1;

  .topLine {
    box-sizing: border-box;
    padding-left: 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 45px;
  }

  .box {
    height: calc(100vh - 310px + 77px);
  }
}

.framePic {
  .close {
    display: none;
  }
}

.framePic:hover {
  .close {
    display: block;
  }
}

.taskLine_actvie {
  background: rgba(5, 192, 173, 0.08);
}

.taskLine {
  width: 100%;
  height: 35px;

  .more {
    width: 18px;
    height: 12px;
    margin: 13px 7px 0 0;
  }

  .arrow90 {
    transform: rotate(0) !important;
  }

  .arrow {
    transition: all 0.5s;
    transform: rotate(-90deg);
    margin: auto 16px auto 15px;
    width: 16px;
    height: 16px;
  }

  .name {
    width: 184px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 35px;
  }

  .status {
    text-align: center;
    margin: auto 0 auto 3px;
    width: 40px;
    height: 16px;
    border-radius: 8px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 16px;
  }
}
.taskLine:hover {
  background: rgba(5, 192, 173, 0.08);
}
.linkLine:hover {
  background: rgba(5, 192, 173, 0.08);
}
.linkLine {
  justify-content: space-between;
  align-items: center;
  height: 42px;

  .more {
    width: 18px;
    height: 12px;
    margin: 0px 7px 0 0;
  }

  .statusblock {
    width: 76px;

    .status {
      margin-left: 18px;
      width: 56px;
      height: 16px;
      background: #ea3555;
      border-radius: 12px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
    }
  }

  .name {
    width: 200px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
  }
}

.uploadCourseFramePic {
  .uploadTip {
    line-height: 160px;
    height: 100px;
  }

  .upload-head {
    width: 102px;
    height: 102px;

    .add {
      width: 20px;
      height: 20px;
      margin: 25px auto 0 auto;
    }

    .cover {
      width: 100px;
      height: 100px;
    }
  }

  .upload-head:hover:after {
    line-height: 100px;
  }
}

// 上传封面样式
.uploadCourseCover {
  .uploadTip {
    line-height: 160px;
    height: 100px;
  }

  .upload-head {
    width: 162px;
    height: 102px;

    .add {
      width: 20px;
      height: 20px;
      margin: 25px auto 0 auto;
    }

    .cover {
      width: 160px;
      height: 100px;
      border-radius: 4px;
    }
  }

  .upload-head:hover:after {
    line-height: 100px;
  }
}
.w_374 {
  width: 374px;
}
.w_289 {
  width: 289px;
}
.topicListDiv {
  width: 100%;
  height: 600px;
}
</style>
